{% load i18n %}
{% load bootstrap3 %}
{% load formset_tags %}
<p>
    {% blocktrans trimmed %}
        With bundles, you can specify products that are always automatically added as add-ons in the cart for this product.
    {% endblocktrans %}
</p>

<div class="formset" data-formset data-formset-prefix="{{ formset.prefix }}">
    {{ formset.management_form }}
    {% bootstrap_formset_errors formset %}
    <div data-formset-body>
        {% for form in formset %}
            <div class="panel panel-default" data-formset-form>
                <div class="sr-only">
                    {{ form.id }}
                    {% bootstrap_field form.DELETE form_group_class="" layout="inline" %}
                </div>
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-sm-8">
                            <h3 class="panel-title">{% trans "Bundled product" %}</h3>
                        </div>
                        <div class="col-sm-4 text-right flip">
                            <button type="button" class="btn btn-xs btn-delete btn-danger" data-formset-delete-button>
                                <i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                </div>
                <div class="panel-body form-horizontal">
                    {% bootstrap_form_errors form %}
                    {% bootstrap_field form.productvar layout="control" %}
                    {% bootstrap_field form.count layout="control" %}
                    {% bootstrap_field form.designated_price layout="control" %}
                </div>
            </div>
        {% endfor %}
    </div>
    <script type="form-template" data-formset-empty-form>
        {% escapescript %}
            <div class="panel panel-default" data-formset-form>
                <div class="sr-only">
                    {{ formset.empty_form.id }}
                    {% bootstrap_field formset.empty_form.DELETE form_group_class="" layout="inline" %}
                </div>
                <div class="panel-heading">
                    <div class="row">
                        <div class="col-sm-8">
                            <h3 class="panel-title">{% trans "Bundled product" %}</h3>
                        </div>
                        <div class="col-sm-4 text-right flip">
                            <button type="button" class="btn btn-xs btn-delete btn-danger" data-formset-delete-button>
                                <i class="fa fa-trash"></i></button>
                        </div>
                    </div>
                </div>
                <div class="panel-body form-horizontal">
                    {% bootstrap_field formset.empty_form.productvar layout="control" %}
                    {% bootstrap_field formset.empty_form.count layout="control" %}
                    {% bootstrap_field formset.empty_form.designated_price layout="control" %}
                </div>
            </div>
        {% endescapescript %}
    </script>
    <p>
        <button type="button" class="btn btn-default" data-formset-add>
            <i class="fa fa-plus"></i> {% trans "Add a new bundled product" %}</button>
    </p>
</div>
